<template>
  <div id="mainWasteDisposePie"></div>
</template>
<script setup>
import * as echarts from "echarts";
import resize from "../../../../mixin/resize.js";
import { getCurrentInstance } from "vue";
let myChart = shallowRef();

let props = defineProps(["wasteFirst"]);
let data = ref([]);
onMounted(() => {
  myChart.value = echarts.init(document.getElementById("mainWasteDisposePie"));
  // resize(myChart.value);

  getServerData();
});

let getServerData = () => {
  myChart.value.setOption({
    color: ["#B2C4D7", "#36AEFF", "#30D4E6", "#4EE8DF", "#8CEFDE"],
    title: {
      text: "",
      textStyle: {
        fontSize: 14,
      },
      top: "0", // 设置标题位于图表的顶部
    },
    tooltip: {
      trigger: "item",
      formatter:function(params){
        return (`${params.data.name}`+"<br>"+'处置量：'+params.data.num+'吨')
      }
    },
    label: {
      show: true,
      position: "outside",
      // formatter: '{b}: {c}', // 标签内容，{b} 表示数据项名称，{c} 表示数据项值
      // formatter: function (param) {
      //    // console.log(param)
      //    let style = ''
      //    switch (param.name) {
      //    }
      //    return (
      //       param.name + '\n\n' + '{' + style + param.value + 'unit' + ' | ' + param.percent + '%}'
      //    )
      // },
      lineStyle: {
        length: 10, // 连线长度
      },
    },
    series: [
      {
        // name: "主要商品月度货值趋势",
        type: "pie",
        radius: [15, 100],
        center: ["50%", "44%"],
        roseType: "area",
        label: {
          show: true,
          formatter: "{b}\n{d}%",
          color: "#A3BAD0",
          fontSize: 15,
        },
        data: data.value,
      },
    ],
  });
};
watch(
  () => props.wasteFirst,
  () => {
    console.log(props.wasteFirst,'props.wasteFirst');
    data.value = props.wasteFirst.map((item) => {
      return {
        num: item.wasteNum,
        name: item.enterpriseName,
        value: item.percent,
      };
    });
    getServerData();
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
#mainWasteDisposePie {
  width: 100%;
  margin-top: 2vh;
  height: calc(36vh - 30px);
}
</style>
